<template>
  <el-table :data="tableList" v-bind="$attrs" >
    <el-table-column v-for="(item, index) in tableHead" :key="index" :prop="item.prop" :label="item.label">
      <template #default="scope">
        <slot :name="item.prop" v-bind="scope">{{ scope.row[scope.column.property] }}</slot>
        <el-table-column v-for="(item, index) in item.children" :key="index" :prop="item.prop" :label="item.label">
          <template #default="scope">
            <slot :name="item.prop" v-bind="scope">{{
              scope.row[scope.column.property]
            }}</slot>
            <el-table-column v-for="(item, index) in item.children" :key="index" :prop="item.prop" :label="item.label">
              <template #default="scope">
                <slot :name="item.prop" v-bind="scope">{{
                  scope.row[scope.column.property]
                }}</slot>
                <el-table-column
                  v-for="(item, index) in item.children"
                  :key="index"
                  :prop="item.prop"
                  :label="item.label"
                >
                  <template #default="scope">
                    <slot :name="item.prop" v-bind="scope">{{
                      scope.row[scope.column.property]
                    }}</slot>
                  </template>
                </el-table-column>
              </template>
            </el-table-column>
          </template>
        </el-table-column>
      </template>
    </el-table-column>

    <!-- <template v-for="item in dataHead" :key="item.id">
      <slot v-if="item.children && item.children.length" :name="item.prop">
        <my-colums :columns="item">
          <template v-slot:[k]="prop" v-for="(v, k) in dataList[0]" :key="k">
            <slot :name="k" v-bind="prop"></slot>
          </template>
        </my-colums>
      </slot>
      <el-table-column :key="item.id" v-else :label="item.label" :prop="item.prop">
        <template #default="scope">
          <slot :name="item.prop" :row="scope.row" :column="scope.column"
            >56{{ scope.row[scope.column.property] }}</slot
          >
        </template>
      </el-table-column>
    </template> -->

    <el-table-column label="操作" align="center">
      <template #default="{ row, column }">
        <el-button v-if="lookUrl" type="text" @click="look(row, column)">查看</el-button>
        <el-button v-if="editUrl" type="text" @click="edit(row, column)">编辑</el-button>
        <el-button v-if="delUrl" type="text" @click="del(row, column)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { onMounted, ref, useSlots } from 'vue'
import MyColums from './MyColums.vue'
import { ElMessage } from 'element-plus/lib'
import { httpGet, httpPost, httpPut, httpDel } from '/@/utils/request'
const $slot = useSlots()
const props = defineProps({
  url: {
    type: Object,
    required: true,
  },
})
const { listUrl, editUrl, delUrl, lookUrl } = props.url
const tableList = ref([])
const tableHead = ref([
  {
    label: 'id',
    prop: 'id',
  },
  {
    label: 'author',
    prop: 'author',
    children: [
      {
        label: 'reviewer',
        prop: 'reviewer',
      },
      {
        label: 'image_uri',
        prop: 'image_uri',
      },
    ],
  },

  {
    label: 'timestamp',
    children: [
      {
        label: 'content_short',
        prop: 'content_short',
        children: [
          {
            label: 'status',
            prop: 'status',
          },
        ],
      },
      {
        label: 'forecast',
        prop: 'forecast',
      },
    ],
  },
])
const slots = useSlots()
console.log(props.url)
// 获取initData
const getInitDate = async () => {
  const { data } = await httpGet(listUrl)
  tableList.value = data.items
}

const chang = row => {
  console.log(row)
}
const look = (row, column) => {
  console.log(row)
  console.log(column)
  ElMessage.success('查看成功')
}
const edit = (row, column) => {
  console.log(row)
  ElMessage.success('编辑成功')
}
const del = row => {
  console.log(row)
  ElMessage.success('删除成功')
}
onMounted(() => {
  getInitDate()
})
</script>

<style lang="css" scoped>
</style>